<template>
  <div class="container-message" id="messageCompBox">
    <template v-if="message.length">
      <div
        class="box-item"
        v-for="(item, index) in message"
        :key="`message_${index}`"
      >
        <div class="message-item-assistant" v-if="item.role == 'assistant'">
          <el-avatar class="icon">
            <img src="../images/ai.png" />
          </el-avatar>
          <div class="texts left">
            <div class="text-left">
              <Markdown :source="item.content" />
            </div>
          </div>
          <div></div>
        </div>
        <div class="message-item-custom" v-else>
          <div></div>
          <div class="texts right">
            <div class="text-right">
              <Markdown :source="item.content" />
            </div>
          </div>
          <el-avatar class="icon">
            <img src="../images/user.png" />
          </el-avatar>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="empty-box">
        <el-empty description="暂无对话信息"></el-empty>
      </div>
    </template>
  </div>
</template>

<script setup>
import { nextTick } from 'vue'
import Markdown from "vue3-markdown-it"
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'
import 'katex/dist/katex.min.css'

// Props 定义
const props = defineProps({
  message: {
    type: Array,
    default: () => []
  }
})

// markdown-it 配置
const markdownOptions = {
  html: true,
  linkify: true,
  typographer: true,
  breaks: true,
  quotes: "",
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(str, { language: lang }).value
      } catch (__) {}
    }
    return ''
  }
}

// 方法
const scrollBottom = () => {
  nextTick(() => {
    const div = document.getElementById("messageCompBox")
    if (div) {
      div.scrollTop = div.scrollHeight - div.clientHeight
    }
  })
}

// 暴露方法给父组件使用
defineExpose({
  scrollBottom
})
</script>

<style scoped lang="scss">
.container-message {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  margin-bottom: 20px;

  .empty-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .box-item {
    width: 100%;
    word-break: break-word;
    margin-bottom: 34px;
    
    // user
    .message-item-custom {
      display: grid;
      grid-template-columns: 18% auto 40px;
      justify-content: end;
      column-gap: 12px;
      margin-bottom: 12px;
      .icon {
        width: 40px;
        height: 40px;
        background-color: #fff;
        border: 2px solid #1296db;
        padding: 6px;
      }
      .texts {
        max-width: 100%;
        overflow-wrap: break-word;
        .text-right {
          padding: 16px 20px;
          color: #333;
          position: relative;
          word-break: break-all;
          max-width: 100%;
          white-space: pre-wrap;
          word-wrap: break-word;
        }
      }
    }
    
    // assistant
    .message-item-assistant {
      display: grid;
      grid-template-columns: 40px auto 18%;
      justify-content: start;
      column-gap: 12px;
      margin-bottom: 12px;
      .icon {
        width: 40px;
        height: 40px;
        background-color: #fff;
        border: 2px solid #1296db;
        padding: 4px;
      }
      .texts {
        max-width: 100%;
        overflow-wrap: break-word;
        .text-left {
          padding: 16px 20px;
          color: #333;
          position: relative;
          word-break: break-all;
          max-width: 100%;
          white-space: pre-wrap;
          word-wrap: break-word;
        }
      }
    }
  }
}

.left,
.right {
  background-color: #fff;
  position: relative;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

:deep(.markdown-body) {
  background-color: transparent !important;
  color: inherit;
  
  // 标题样式
  h1, h2, h3, h4, h5, h6 {
    margin-top: 24px;
    margin-bottom: 16px;
    font-weight: 600;
    line-height: 1.25;
  }

  // 加粗文本样式
  strong {
    font-weight: 600;
    padding: 0 2px;
  }

  // 列表样式
  ul, ol {
    padding-left: 2em;
    margin-bottom: 16px;
  }

  // 列表项样式
  li {
    margin: 4px 0;
  }

  // 代码块样式
  pre {
    margin: 16px 0;
    padding: 16px;
    background-color: #f6f8fa;
    border-radius: 6px;
    overflow-x: auto;
  }

  // 行内代码样式
  code {
    font-family: 'Courier New', Courier, monospace;
    padding: 0.2em 0.4em;
    background-color: rgba(175, 184, 193, 0.2);
    border-radius: 3px;
    font-size: 85%;
  }

  a {
    color: #0366d6;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
}

:deep(pre) {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

:deep(code) {
  white-space: pre-wrap;
  word-wrap: break-word;
}

.input-area {
  margin-top: 24px;
}
</style>
